<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :title="dataForm && dataForm.id ? this.$i18n.t('admin.modifyAcc') : this.$i18n.t('shopProcess.addSettlementAccount')"
    :close-on-click-modal="false"
    :append-to-body="true"
    width="600px"
  >
    <el-form ref="dataForm" :model="dataForm" :rules="rules" label-width="auto" size="small">
      <el-form-item prop="chainCode" :label="this.$i18n.t('shopProcess.chainName')">
        <el-select v-model="dataForm.chainCode" clearable style="width: 490px" @change="getChainName">
          <el-option
            v-for="item in selectChainList"
            :key="item.code"
            :label="item.name"
            :value="item.code"
          />
        </el-select>
      </el-form-item>
      <el-form-item prop="nftName" :label="this.$i18n.t('shopProcess.nftAccountName')">
        <el-input
          v-model="dataForm.nftName"
          maxlength="20"
          @blur="
            dataForm.nftName =
            dataForm.nftName ?
            removeHeadAndTailSpaces(dataForm.nftName) :
            dataForm.nftName
          "
        />
      </el-form-item>
      <el-form-item prop="nftPassward" :label="this.$i18n.t('shopProcess.nftAccountPassword')">
        <el-input
          v-model="dataForm.nftPassward"
          maxlength="20"
          @blur="
            dataForm.nftPassward =
            dataForm.nftPassward ?
            removeHeadAndTailSpaces(dataForm.nftPassward) :
            dataForm.nftPassward
          "
        />
      </el-form-item>
      <el-form-item prop="remark" :label="this.$i18n.t('shopProcess.nftAccountRemark')">
        <el-input
          v-model="dataForm.remark"
          maxlength="20"
          @blur="
            dataForm.remark =
            dataForm.remark ?
            removeHeadAndTailSpaces(dataForm.remark) :
            dataForm.remark
          "
        />
      </el-form-item>
    </el-form>
    <div slot="footer" class="btn-row">
      <div class="default-btn" @click="dialogVisible = false">{{ $t('shopProcess.cancel') }}</div>
      <div class="default-btn primary-btn" @click="submitForm">{{ $t('shopProcess.confirm') }}</div>
    </div>
  </el-dialog>
</template>

<script>
import { removeHeadAndTailSpaces } from '@/utils/validate'
export default {
  data () {
    const validEmptyTab = (rule, value, callback) => {
      if (!value.trim()) {
        callback(new Error(this.$i18n.t('shopProcess.inputAllSpace')))
      } else {
        callback()
      }
    }
    return {
      removeHeadAndTailSpaces: removeHeadAndTailSpaces,
      dialogVisible: false,
      dataForm: {
        chainName: '',
        nftName: '',
        nftPassward: '',
        remark: '',
        createTime: 0,
        id: null,
        chainCode: null,
        shopId:null
      },
      selectChainList: [],
      rules: {
        // bankName: [
        //   { required: true, message: this.$i18n.t('shopProcess.brandNameNotEmpty'), trigger: 'blur' },
        //   { min: 2, max: 20, message: this.$i18n.t('shopProcess.brandNameErrorTips'), trigger: 'blur' },
        //   { validator: validEmptyTab, trigger: 'blur' }
        // ],
        // recipientName: [
        //   { required: true, message: this.$i18n.t('shopProcess.recipientNameNotEmpty'), trigger: 'blur' },
        //   { min: 2, max: 20, message: this.$i18n.t('shopProcess.recipientNameInputTips'), trigger: 'blur' },
        //   { validator: validEmptyTab, trigger: 'blur' }
        // ],
        // cardNo: [
        //   { required: true, message: this.$i18n.t('shopProcess.accountNotEmpty'), trigger: 'blur' },
        //   // { validator: validateCardNo, trigger: 'blur' },
        //   { validator: validEmptyTab, trigger: 'blur' }
        // ],
        // openingBank: [
        //   { required: true, message: this.$i18n.t('shopProcess.openingBankNotEmpty'), trigger: 'blur' },
        //   { min: 2, max: 20, message: this.$i18n.t('shopProcess.openingBankErrorTips'), trigger: 'blur' },
        //   { validator: validEmptyTab, trigger: 'blur' }
        // ]
      }
    }
  },
  mounted () {
    this.getSelectList()
  },
  methods: {
    getChainName (chainCode) {
      this.selectChainList.forEach(res => {
        if (res.code == chainCode) {
          this.dataForm.chainName = res.name
        }
      })
    },
    getSelectList () {
      this.$http({
        url: this.$http.adornUrl('/admin/nftManage/list'),
        method: 'get',
      }).then(({ data }) => {
        this.selectChainList = data;
      })
    },
    init (obj) {
      this.dialogVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
        if (!obj.id) {
          this.dataForm.shopId = obj.shopId
          return
        }
        this.dataForm = obj
      })
    },

    /**
     * 创建或修改账号
     */
    submitForm () {
      this.$refs.dataForm.validate(valid => {
        if (!valid) {
          return
        }
        this.$http({
          url: this.$http.adornUrl('/admin/shopChainConfig'),
          method: this.dataForm.id ? 'put' : 'post',
          data: this.$http.adornData(this.dataForm)
        }).then(({ data }) => {
          this.$message({
            message: this.$i18n.t('shopProcess.saveSuccessfully'),
            type: 'success',
            duration: 1000
          })
          this.dialogVisible = false
          this.$emit('refreshDataList')
          this.$refs['dataForm'].resetFields()
        })
      })
    }
  }
}
</script>

